---
topTitle: Components
title: Pricing Table
icon: fa fa-credit-card
scripts:
- Metis.MetisPricing()
---
<div class="row">
  <div class="col-lg-12">
  <h2>Dark <small>primary</small> </h2>
    <div class="btn-group" data-toggle="buttons" id="dark-toggle">
    <label class="btn btn-primary">
      <input type="radio" name="options" value="primary"> Primary
    </label>
    <label class="btn btn-success">
      <input type="radio" name="options" value="success"> Success
    </label>
    <label class="btn btn-danger">
      <input type="radio" name="options" value="danger"> Danger
    </label>
    <label class="btn btn-info">
      <input type="radio" name="options" value="info"> Info
    </label>
    <label class="btn btn-warning">
      <input type="radio" name="options" value="warning"> Warning
    </label>
    <label class="btn btn-default">
      <input type="radio" name="options" value="default"> Default
    </label>
  </div>
    <ul class="pricing-table dark" contenteditable>
	<li class="col-lg-4">
		<h3>Starter</h3>
		<div class="price-body">
			<div class="price">
				Free
			</div>
		</div>
		<div class="features">
			<ul>
				<li>Premium Profile Listing</li>
				<li>Unlimited File Access</li>
				<li>Free Appointments</li>
				<li><strong>5 Bonus Points</strong> every month</li>
				<li>Customizable Profile Page</li>
				<li><strong>2 months</strong> support</li>
			</ul>
		</div>
		<div class="footer">
			<a href="#" class="btn btn-info btn-rect">Get Started</a>
		</div>
	</li>
	<!-- Active/Hover styles -->
	<li class="active primary col-lg-4">
		<h3>Basic</h3>
		<div class="price-body">
			<div class="price">
				<span class="price-figure"><sup>$</sup>24<small>.99</small></span>
				<span class="price-term">per month</span>
			</div>
		</div>
		<div class="features">
			<ul>
				<li>Premium Profile Listing</li>
				<li>Unlimited File Access</li>
				<li>Free Appointments</li>
				<li><strong>20 Bonus Points</strong> every month</li>
				<li>Customizable Profile Page</li>
				<li><strong>6 months</strong> support</li>
			</ul>
		</div>
		<div class="footer">
			<a href="#" class="btn btn-metis-1 btn-lg btn-rect">Get Started</a>
		</div>
	</li>
	<li class="col-lg-4">
		<h3>Premium</h3>
		<div class="price-body">
			<div class="price">
				<span class="price-figure"><sup>$</sup>49<small>.99</small></span>
				<span class="price-term">per month</span>
			</div>
		</div>
		<div class="features">
			<ul>
				<li>Premium Profile Listing</li>
				<li>Unlimited File Access</li>
				<li>Free Appointments</li>
				<li><strong>50 Bonus Points</strong> every month</li>
				<li>Customizable Profile Page</li>
				<li><strong>Lifetime</strong> support</li>
			</ul>
		</div>
		<div class="footer">
			<a href="#" class="btn btn-info btn-rect">Get Started</a>
		</div>
	</li>
	<div class="clearfix"></div>
</ul>

  </div>
  <!-- /.col-lg-12 -->
</div>
<!-- /.row -->

<div class="row">
  <div class="col-lg-12">
  <h2>Light <small>warning</small> </h2>
      <div class="btn-group" data-toggle="buttons" id="light-toggle">
    <label class="btn btn-primary">
      <input type="radio" name="options" value="primary"> Primary
    </label>
    <label class="btn btn-success">
      <input type="radio" name="options" value="success"> Success
    </label>
    <label class="btn btn-danger">
      <input type="radio" name="options" value="danger"> Danger
    </label>
    <label class="btn btn-info">
      <input type="radio" name="options" value="info"> Info
    </label>
    <label class="btn btn-warning">
      <input type="radio" name="options" value="warning"> Warning
    </label>
    <label class="btn btn-default">
      <input type="radio" name="options" value="default"> Default
    </label>
  </div>
    <ul class="pricing-table" contenteditable id="light">
	<li class="col-lg-3">
		<h3>Starter</h3>
		<div class="price-body">
			<div class="price">
				Free
			</div>
		</div>
		<div class="features">
			<ul>
				<li>Premium Profile Listing</li>
				<li>Unlimited File Access</li>
				<li>Free Appointments</li>
				<li><strong>5 Bonus Points</strong> every month</li>
				<li>Customizable Profile Page</li>
				<li><strong>2 months</strong> support</li>
			</ul>
		</div>
		<div class="footer">
			<a href="#" class="btn btn-info btn-rect">Get Started</a>
		</div>
	</li>
	<!-- Active/Hover styles -->
	<li class="active danger col-lg-3">
		<h3>Basic</h3>
		<div class="price-body">
			<div class="price">
				<span class="price-figure"><sup>$</sup>24<small>.99</small></span>
				<span class="price-term">per month</span>
			</div>
		</div>
		<div class="features">
			<ul>
				<li>Premium Profile Listing</li>
				<li>Unlimited File Access</li>
				<li>Free Appointments</li>
				<li><strong>20 Bonus Points</strong> every month</li>
				<li>Customizable Profile Page</li>
				<li><strong>6 months</strong> support</li>
			</ul>
		</div>
		<div class="footer">
			<a href="#" class="btn btn-metis-1 btn-lg btn-rect">Get Started</a>
		</div>
	</li>
	<li class="col-lg-3">
		<h3>Premium</h3>
		<div class="price-body">
			<div class="price">
				<span class="price-figure"><sup>$</sup>49<small>.99</small></span>
				<span class="price-term">per month</span>
			</div>
		</div>
		<div class="features">
			<ul>
				<li>Premium Profile Listing</li>
				<li>Unlimited File Access</li>
				<li>Free Appointments</li>
				<li><strong>50 Bonus Points</strong> every month</li>
				<li>Customizable Profile Page</li>
				<li><strong>Lifetime</strong> support</li>
			</ul>
		</div>
		<div class="footer">
			<a href="#" class="btn btn-info btn-rect">Get Started</a>
		</div>
	</li>
	<li class="col-lg-3">
		<h3>Ultra</h3>
		<div class="price-body">
			<div class="price">
				<span class="price-figure"><sup>$</sup>149<small>.99</small></span>
				<span class="price-term">per month</span>
			</div>
		</div>
		<div class="features">
			<ul>
				<li>Premium Profile Listing</li>
				<li>Unlimited File Access</li>
				<li>Free Appointments</li>
				<li><strong>150 Bonus Points</strong> every month</li>
				<li>Customizable Profile Page</li>
				<li><strong>Eternity</strong> support</li>
			</ul>
		</div>
		<div class="footer">
			<a href="#" class="btn btn-info btn-rect">Get Started</a>
		</div>
	</li>
	<div class="clearfix"></div>
</ul>

  </div>
  <!-- /.col-lg-12 -->
</div>
<!-- /.row -->
